<template>
  <div class="sub-main-wrap-home">
    <div class="home-left home-sub"
         :class="{'animate__animated animate__fadeOutLeft': !visible, 'animate__animated animate__fadeInLeft': visible}">
      <div class="sub-card">
        <div class="sub-card-one">
          <commonCard title='2022年全市“标准地”储备规模' iconName="area">
            <chubeiguimo></chubeiguimo>
          </commonCard>
          <div class="toggle-close" @click="toggleDisplay">
            <div class="close-bkg">
              <img src="@/assets/img/collapse.svg" alt="收起">
            </div>
            <div class="close-icon">
              <div class="arrow-icon">
                <img src="@/assets/img/close-arrow.svg" alt="收起">
              </div>
              <div class="arrow-icon-text">
                <span>收起</span>
              </div>
            </div>
          </div>
        </div>
        <div class="sub-card-two">
          <commonCard title='2022年全市“标准地”储备规划用途' iconName="quzhenmianji">
            <chubeiyongtu></chubeiyongtu>
          </commonCard>
        </div>
      </div>
    </div>
    <div class="home-right home-sub"
         :class="{'animate__animated animate__fadeOutRight': !visible, 'animate__animated animate__fadeInRight': visible}">
      <Transition name="slide-fade">
        <div class="sub-card" v-if="show">
          <div class="sub-card-one">
            <commonCard v-bind:title="'2022年度'+title+'“标准地”整备进度统计'" iconName="shangshitongji">
              <jingdutongji :index="index" :town="title"></jingdutongji>
            </commonCard>
          </div>
          <div class="sub-card-two">
            <commonCard title='2022年全市“标准地”储备库' iconName="quhzenfenbu">
              <chubeiku :index="index"></chubeiku>
            </commonCard>
          </div>
        </div>
      </Transition>
    </div>
    <div class="toggle-open" @click="toggleDisplay" v-show="!visible"
         :class="{'animate__animated animate__fadeInLeft': !visible}">
      <div class="close-bkg">
        <img src="@/assets/img/open.svg" alt="展开">
      </div>
      <div class="close-icon">
        <div class="arrow-icon">
          <img src="@/assets/img/open-arrow.svg" alt="展开">
        </div>
        <div class="arrow-icon-text">
          <span>展开</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import commonCard from '@/components/commonCard/index.vue'
import chubeiguimo from './components/chubeiguimo.vue'
import chubeiku from './components/chubeiku.vue'
import chubeiyongtu from './components/chubeiyongtu.vue'
import jingdutongji from './components/jingdutongji.vue'

export default defineComponent({
  components: {commonCard, chubeiyongtu, chubeiguimo, chubeiku, jingdutongji},
  props: ['index'],
  setup(props) {
    const visible = ref(true)
    const toggleDisplay = () => {
      console.log('切换');
      visible.value = !visible.value
    }
    let title = ref('太仓市')
    let show = ref(true)
    if (props.index === 1) {
      title.value = '资规国开分局'
      show.value = false
      setTimeout(() => {
        show.value = true
      }, 400)
    } else if (props.index === 2) {
      title.value = '资规高新分局'
      show.value = false
      setTimeout(() => {
        show.value = true
      }, 400)
    } else if (props.index === 3) {
      title.value = '资规城厢分局'
      show.value = false
      setTimeout(() => {
        show.value = true
      }, 400)
    } else if (props.index === 4) {
      title.value = '资规沙溪分局'
      show.value = false
      setTimeout(() => {
        show.value = true
      }, 400)
    } else if (props.index === 5) {
      title.value = '资规浏河分局'
      show.value = false
      setTimeout(() => {
        show.value = true
      }, 400)
    } else if (props.index === 6) {
      title.value = '资规璜泾分局'
      show.value = false
      setTimeout(() => {
        show.value = true
      }, 400)
    } else if (props.index === 7) {
      title.value = '资规双凤分局'
      show.value = false
      setTimeout(() => {
        show.value = true
      }, 400)
    } else {
      title.value = '太仓市'
      show.value = false
      setTimeout(() => {
        show.value = true
      }, 400)
    }
    return {
      title,
      show,
      toggleDisplay,
      visible
    }
  }
})
</script>


<style scoped lang="scss">
.sub-main-wrap-home {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;

  .home-sub {
    height: 100%;
    position: relative;
    width: 400px;

    .sub-card {
      height: 100%;
      width: 100%;
      position: relative;

      .sub-card-one {
        width: 100%;
        height: 43.4%;
        position: relative;

        .toggle-close {
          width: 24px;
          height: 88px;
          position: absolute;
          top: 24px;
          right: -23px;
          cursor: pointer;
          pointer-events: auto;

          .close-bkg {
            img {
              width: 100%;
              height: 100%;
              display: block;
            }

            position: absolute;
          }

          .close-icon {
            position: absolute;
            top: 0;
            left: 0;
            right: 1px;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .arrow-icon {
              width: 13px;
              height: 13px;
              display: block;
            }

            .arrow-icon-text {
              color: rgba(255, 255, 255, 0.85);
              width: 13px;
              margin-top: 6px;
            }
          }
        }
      }

      .sub-card-two {
        width: 100%;
        height: 54.3%;
        margin-top: 20px;
      }
    }
  }

  .toggle-open {
    width: 24px;
    height: 88px;
    position: absolute;
    top: 24px;
    left: 0;
    cursor: pointer;
    pointer-events: auto;

    .close-bkg {
      img {
        width: 100%;
        height: 100%;
        display: block;
      }

      position: absolute;
    }

    .close-icon {
      position: absolute;
      top: 0;
      left: 0;
      right: 1px;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .arrow-icon {
        width: 13px;
        height: 13px;
        display: block;
      }

      .arrow-icon-text {
        color: rgba(255, 255, 255, 0.85);
        width: 13px;
        margin-top: 6px;
      }
    }
  }
}
</style>
<style scoped lang="scss">
.sub-main-wrap-home {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;

  .slide-fade-enter-active {
    transition: all 0.8s ease-out;
  }

  .slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  }

  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateX(200px);
    opacity: 0;
  }

  .home-sub {
    height: 100%;
    position: relative;
    width: 400px;

    .sub-card {
      height: 100%;
      width: 100%;
      position: relative;

      .sub-card-one {
        width: 100%;
        height: 43.4%;
      }

      .sub-card-two {
        width: 100%;
        height: 54.3%;
        margin-top: 20px;
      }
    }
  }

  .home-left {

  }
}
</style>

